<template>
  <div class="markdown-body">
    <mavon-editor ref=md
                  v-model="value"
                  codeStyle="dracula"
                  :ishljs="true"
                  @imgAdd="$imgAdd"
                  @change="handleChange"></mavon-editor>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// const config = require('../../config/oj.config.json')
export default {
  components: {
    mavonEditor
  },
  props: {
    text: String
  },
  data () {
    return {
      value: ''
    }
  },
  watch: {
  },
  mounted () {
    this.value = this.text
  },
  methods: {
    handleChange (value, render) {
      this.$emit('inputValue', value)
      this.$emit('inputRender', render)
    },
    // 绑定@imgAdd event
    async $imgAdd (pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append('file', $file)
      let data = await this.$http.post('/upload/picture', formdata)
      let imgurl = process.env.VUE_APP_APIURL + data.datas[0]
      this.$refs.md.$img2Url(pos, imgurl)
    }
  }
}
</script>

<style>
.markdown-body {
  width: 100%;
  height: 851.5px;
}
</style>
